<template>
    <div class="Message">
        <div class="ebook" ref='ebook'>
            <ebook-footer></ebook-footer>
            <ebook-header></ebook-header>
            <ebook-title></ebook-title>
            <ebook-reader></ebook-reader>
            <ebook-menu></ebook-menu>
            <ebook-bookmark></ebook-bookmark>
        </div>
    </div>
</template>

<script>
    import EbookReader from '../components/ebook/EbookReader'
    import EbookTitle from '../components/ebook/EbookTitle'
    import EbookMenu from '../components/ebook/EbookMenu'
    import EbookBookmark from '../components/ebook/EbookBookmark'

    import EbookHeader from '../components/ebook/EbookHeader'
    import EbookFooter from '../components/ebook/EbookFooter'
    import { ebookMixin } from '../utils/mixin'
    import { getReadTime,saveReadTime } from '../utils/localStorage'
    import { setInterval, setTimeout } from 'timers';
    export default {
        mixins: [ebookMixin],
        components:{
            EbookReader,
            EbookTitle,
            EbookMenu,
            EbookBookmark,
            EbookHeader,
            EbookFooter
        },
        watch:{

            offsetY(v) {

                if (!this.menuVisible && this.bookAvailable){
                    if(v > 0){
                    this.move(v)
                    }else if(v===0){
                        this.restore()
                    }
                }

            }
        },
        methods:{
            restore(){
                this.$refs.ebook.style.top = 72 + 'px'
                this.$refs.ebook.style.transition = 'all .2s linear'
                setTimeout(() =>{
                    this.$refs.ebook.style.transition =''
                },200)
            },
            move(v){
                console.log('zzz')
                this.$refs.ebook.style.top = (v+72 + 'px')
            },
            startLoopReadTime() {
                let readTime = getReadTime(this.fileName)
                if (!readTime) {
                readTime = 0
                }
                this.task = setInterval(() => {
                readTime++
                if (readTime % 30 === 0) {
                    saveReadTime(this.fileName, readTime)
                }
                }, 1000)
            }
        },
        mounted(){
            this.startLoopReadTime()
        },
        beforeDestroy(){
            if(this.task) {
                clearInterval(this.task)
            }
        }
    }
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
  @import "../assets/styles/global";

  .ebook {
    position: absolute;
    top:72px;
    left:0;
    width: 100%;
    height: 100%;
    right: 0;
    bottom: 0;

  }
</style>

